<template>
    <div>
        <el-submenu :index="menu.value" v-if="menu.children&&menu.children.length>0" :popper-append-to-body="true">
            <template slot="title">
                <i v-if="menu.meta && menu.meta.icon" :class="menu.meta&&menu.meta.icon"></i>
                <span slot="title">{{menu.meta&&menu.meta.title}}</span>
            </template>
            <MenuTree v-for="item in menu.children.length>0?menu.children:[]" :key="item.value" :menu="item"></MenuTree>
        </el-submenu>
        <div v-else>
            <el-menu-item v-if="!menu.hidden&&menu.meta" :index="menu.value" @click="sideClick(menu.value)">
                <i :class="menu.meta&&menu.meta"></i>
                <span slot="title">{{menu.meta&&menu.meta.title}}</span>
            </el-menu-item>
        </div>
    </div>
</template>
<script>
export default {
    name:'MenuTree',
    props:{
        menu:{
            type:Object,
            required:true
        },
        isCollapse:{
            type:Boolean
        }
    },
    data(){
        return{}
    },
    methods:{
       sideClick(name) {
           this.$emit('sideClick',name)
       }
    }
}
</script>